<template>
	<div class="system-user-container">
		<el-card shadow="hover">
			<div class="system-user-search mb10">
				<div>
					<el-button v-if="lastPids.length !== 0" type="info" icon="el-icon-refresh-left" @click="showParentTable()">返回上级</el-button>
					<el-button type="success" icon="el-icon-plus" @click="addType">新增分类</el-button>
					<el-button :disabled="multipleSelection.length === 0" type="danger" icon="el-icon-delete" @click="delType">批量删除</el-button>
				</div>
				<div>
					<el-input v-model="filtering.input" placeholder="请输入分类名称" prefix-icon="el-icon-search" style="max-width: 180px"></el-input>
					<el-button :loading="tableData.loading" type="primary" class="ml10" @click="initTableData">查询</el-button>
				</div>
			</div>
			<mTableLength :number="multipleSelection.length" @cancel="cancel"></mTableLength>
			<el-table
				ref="multipleTable"
				:data="tableData.data"
				stripe
				v-loading="tableData.loading"
				style="width: 100%"
				:header-cell-style="{ color: '#7f8da6', backgroundColor: '#F5F6F8' }"
				@selection-change="handleSelectionChange"
			>
				<el-table-column type="selection" width="55" fixed="left" />
				<el-table-column label="分类名称" show-overflow-tooltip>
					<template #default="scope">
						<div class="flex-ac">
							<el-image class="system-user-photo" :src="getBaseUrl + scope.row.pic" :preview-src-list="[getBaseUrl + scope.row.pic]"></el-image>
							<div class="ml5">{{ scope.row.name }}</div>
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="d" label="商品数量" show-overflow-tooltip></el-table-column>
				<el-table-column label="是否显示" show-overflow-tooltip>
					<template #default="scope">
						<el-switch v-model="scope.row.state" :active-value="1" :inactive-value="2" @click="editTypeStatus(scope.row)"></el-switch>
					</template>
				</el-table-column>
				<el-table-column prop="sort" label="排序" show-overflow-tooltip></el-table-column>
				<el-table-column prop="path" label="操作" width="300" fixed="right">
					<template #default="scope">
						<el-button size="mini" @click="editType(scope.row)" icon="el-icon-edit" type="primary"></el-button>
						<el-button size="mini" @click="onRowDel(scope.row)" icon="el-icon-delete" type="danger"></el-button>
						<el-button size="mini" @click="addNextType(scope.row)" type="success">新增子级</el-button>
						<el-button size="mini" @click="showSonTable(scope.row)" type="warning">查看子级</el-button>
					</template>
				</el-table-column>
			</el-table>
			<pagination
				v-show="tableData.total > 0"
				:total="tableData.total"
				v-model:page="tableData.param.pageNum"
				v-model:limit="tableData.param.pageSize"
				@pagination="getList"
			/>
		</el-card>
	</div>
</template>

<script lang="ts">
import { toRefs, reactive, onMounted, computed } from 'vue'
import Pagination from '/@/components/Pagination/index.vue'
import mTableLength from '/@/components/mTableLength/index.vue'
import { ElMessageBox, ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import Base64 from '/@/utils/base64'
import { useStore } from '/@/store/index.ts'
import { getCategoryListById, updateCategory } from '/@/api/good'

export default {
	name: 'goodType',
	components: { Pagination, mTableLength },
	setup() {
		const router = useRouter()
		const store = useStore()

		const getBaseUrl = computed(() => {
			return store.state.baseServices.baseServices.img_base_url
		})

		const refs: any = reactive({
			multipleTable: null
		})

		const state: any = reactive({
			filtering: {
				input: '',
				pid: 0
			},
			tableData: {
				data: [
					{
						pid: 0
					}
				],
				total: 0,
				loading: false,
				param: {
					pageNum: 1,
					pageSize: 10
				}
			},
			lastPids: [], //储存每一级的pid
			multipleSelection: []
		})
		// 初始化表格数据
		const initTableData = () => {
			state.tableData.loading = true

			const params = {
				pid: state.filtering.pid,
				searchText: state.filtering.input,
				pageNum: state.tableData.param.pageNum,
				pageSize: state.tableData.param.pageSize
			}

			getCategoryListById(params)
				.then(res => {
					const { datas } = res

					state.tableData.data = datas.list
					state.tableData.total = datas.total
				})
				.finally(() => {
					state.tableData.loading = false
				})
		}
		// 添加
		const addType = () => {
			router.push({
				path: '/good/operationGoodType',
				query: {
					info: Base64(
						JSON.stringify({
							pid: 0,
							id: 0,
							type: 'add'
						})
					)
				}
			})
		}
		// 编辑
		const editType = (row: object) => {
			router.push({
				path: '/good/operationGoodType',
				query: {
					info: Base64(
						JSON.stringify({
							pid: row.pid,
							id: row.id,
							type: 'edit'
						})
					)
				}
			})
		}
		// 多行删除
		const delType = () => {
			ElMessageBox.confirm('此操作将删除选中所有商品类别, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				ElMessage.success('删除成功！')
				initTableData()
			})
			console.log(state.multipleSelection)
		}
		// 当前行删除
		const onRowDel = (row: object) => {
			ElMessageBox.confirm('此操作将删除该商品类别, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				ElMessage.success('删除成功！')
				initTableData()
			})
			console.log(row)
		}
		// 当前行编辑显示状态，这个编辑已经实现物理改变，不需要重新获取表格数据
		const editTypeStatus = (row: object) => {
			updateCategory({ id: row.id, state: row.state }).then(() => {
				ElMessage.success('修改状态成功')
			})
		}
		// 新增子级
		const addNextType = (row: object) => {
			router.push({
				path: '/good/operationGoodType',
				query: {
					info: Base64(
						JSON.stringify({
							pid: row.id,
							id: 0,
							type: 'add'
						})
					)
				}
			})
		}
		// 查看子级
		const showSonTable = (row: object) => {
			state.filtering.pid = row.id

			state.lastPids.push(row.pid)

			initTableData()
		}
		// 返回上级
		const showParentTable = () => {
			state.filtering.pid = state.lastPids[state.lastPids.length - 1]
			state.lastPids.splice(state.lastPids.length - 1, 1)
			initTableData()
		}
		const getList = val => {
			state.tableData.param.pageNum = val.page
			state.tableData.param.pageSize = val.limit
			initTableData()
		}
		const handleSelectionChange = val => {
			state.multipleSelection = val
		}
		const cancel = () => {
			refs.multipleTable.clearSelection()
		}
		// 页面加载时
		onMounted(() => {
			initTableData()
		})
		return {
			initTableData,
			getBaseUrl,
			addType,
			editType,
			delType,
			onRowDel,
			editTypeStatus,
			addNextType,
			showSonTable,
			showParentTable,
			getList,
			handleSelectionChange,
			cancel,
			...toRefs(refs),
			...toRefs(state)
		}
	}
}
</script>

<style scoped lang="scss">
.system-user-container {
	.system-user-search {
		display: flex;
		justify-content: space-between;
	}
	.system-user-photo {
		width: 40px;
		height: 40px;
	}
}
</style>
